<template>
  <div class="login">
    <div class="con">
      <div class="title">
        <h2>后台管理系统</h2>
      </div>
      <div class="form">
        <el-tabs type="border-card" stretch v-model="activeName">
          <el-tab-pane name="account">
            <template #label>
              <span>
                <el-icon>
                  <Avatar />
                </el-icon>
                账号登录
              </span>
            </template>
            <to-lgoin ref="toLoginRef"></to-lgoin>
          </el-tab-pane>
          <el-tab-pane name="phone">
            <template #label>
              <span>
                <el-icon>
                  <Iphone />
                </el-icon>
                手机登录
              </span>
            </template>
            <code-login ref="codeLoginRef"></code-login>
          </el-tab-pane>
        </el-tabs>

        <div class="accout-control">
          <el-checkbox style="float: left" v-model="isKeepPwd" v-if="activeName == 'account'" label="记住密码" size="large"></el-checkbox>
          <el-link class="forgetPwd">忘记密码</el-link>
        </div>

        <el-button class="btn" type="primary" @click="haldelLoginClick">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import toLgoin from './components/toLogin.vue';
import codeLogin from './components/codeLogin.vue';
import { Avatar, Iphone } from '@element-plus/icons-vue';
export default defineComponent({
  name: 'Login',
  components: { toLgoin, codeLogin, Avatar, Iphone },
  setup() {
    const isKeepPwd = ref(true);
    const activeName = ref<string>('account');
    const toLoginRef = ref<InstanceType<typeof toLgoin>>();
    const codeLoginRef = ref<InstanceType<typeof codeLogin>>();
    const haldelLoginClick = () => {
      if (activeName.value == 'account') {
        toLoginRef.value?.actionSubmint(isKeepPwd.value);
      } else {
        codeLoginRef.value?.actionSubmint();
      }
    };
    return {
      activeName,
      isKeepPwd,
      haldelLoginClick,
      toLoginRef,
      codeLoginRef
    };
  }
});
</script>

<style lang="less">
.login {
  width: 100vw;
  height: 100vh;
  background: url('../../assets/img/background.svg');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  .con {
    width: 350px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .title {
      width: 100%;
      height: 70px;
      line-height: 50px;
      text-align: center;
      h2 {
        font-size: 36px;
      }
    }
    .form {
      width: 100%;
      height: 330px;
      .btn {
        width: 100%;
      }

      .forgetPwd {
        float: right;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: #409eff;
      }
    }
  }
}
</style>
